<template>
  <div>

    <div  style="margin: 20px">
      <el-button type="warning" @click="router.push('/manager/manager')">页面跳转manager</el-button>
    </div>

    <div style="margin: 20px">
      <RouterLink to="/manager/test">通过router实现页面跳转</RouterLink>|||<a href="/test">通过超链接实现页面跳转</a>
    </div>

    <!--  路由跳转页面(编程式跳转)
          @click="router.push跳转之后可返回   @click="router.replace跳转之后不可以返回-->
    <div  style="margin: 20px">
      <el-button type="warning" @click="router.push('/manager/test')">页面跳转</el-button>
      <el-button type="warning" @click="router.replace('/manager/test')">页面跳转</el-button>
    </div>

    <!--  路由传参---使用的都是query类型的参数
     传单个参数    router.push('/test?id=1')
     传多个参数    c  或者  router.push({path:'/test',query:{id:2,name:'😙'}})
       获取参数    通过router.currentRoute.value.query 获取到query对象{id:1}   -->
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="router.push('/manager/test?id=1&name=😙')">路由传参</el-button>
    </div>

    <!--  readonly,disabled 可以显示文本但是不能输入   :prefix-icon="Search"    输入框前面加图标
          clearable--按钮一样的东西，一键清除文本内容    :suffix-icon="Calendar"  输入框后面加图标  -->
    <el-input clearable v-model="data.input" style="width: 240px" placeholder="请输入内容" :prefix-icon="Search"/>
    <el-input style="width: 240px" :suffix-icon="Calendar"/>

    <!--  多行文本  -->
    <el-input v-model="data.elem" style="width: 240px" type="textarea" placeholder="亲输入一段描述"/>

    <!--  display: flex 可以让多个垂直的盒子水平对齐  -->
    <div style="display: flex">
      <div style="width: 200px; height: 200px; background-color: aqua; margin-right: 10px;
                  text-align: center; line-height: 200px; font-size: 30px"></div>
      <div style="width: 200px; height: 200px; background-color: aqua; margin-right: 10px;
                  text-align: center; line-height: 200px; font-size: 30px"></div>

    </div>

    <!--  单选  下拉框 --- multiple多选  clearable--一键清除文本内容 -->
    <div style="margin: 20px 0">
      <el-select
          clearable
          multiple
          v-model="data.value"
          placeholder="请选择水果"
          style="width: 240px">

        <el-option
            v-for="item in data.options"
            :key="item"
            :label="item"
            :value="item"/>
      </el-select>

    </div>

    <div style="margin: 20px 0">
      <el-radio-group v-model="data.sex">
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>
      </el-radio-group>

      <el-radio-group style="margin-left: 100px" v-model="data.tag" size="large" fill="#6cf">
        <el-radio-button label="我发布的内容" value="1" />
        <el-radio-button label="我点赞的内容" value="2" />
        <el-radio-button label="我收藏的内容" value="3" />
      </el-radio-group>
    </div>

    <!-- 插入单图  el-image 如果需要使用本地图片路径，必须导入 import img from '@/assets/logo.svg'
          :preview-src-list="[img]"  添加了图片预览功能，当点击图片时，会弹出一个预览窗口显示图片
          style="width: 100px; margin-left:100px" 设置el-image组件的样式，宽度为100像素，并且左侧外边距为100像素
          preview-src-list属性接受一个数组，这里只包含了一个元素img，即当前显示的图片-->
    <div style="margin: 20px 0">
      <img src="@/assets/logo.svg" alt="" style="width: 100px">
      <el-image :src="img" style="width: 100px; margin-left:100px" :preview-src-list="[img]"/>
    </div>

    <!--  轮播图  本地图片要导入import lun1 from '@/assets/lun1.jpg' -->
    <div style="margin: 20px 0;" >
      <el-carousel height="400px" style="width: 400px; ">
        <el-carousel-item v-for="item in data.imgs" :key="item">
          <img style="width: 100%" height="400px" :src="item" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>

    <!--  选择日期 format指定输入框的格式  value-format指定绑定值的格式   不写value-format不利于数据存储-->
    <div style="margin: 20px 0;">
      <el-date-picker
          v-model="data.date"
          type="date"
          placeholder="请选择日期"
          format="YYYY/MM/DD"
          value-format="YYYY/MM/DD"
      />{{data.date}}

      <el-date-picker
          style="margin-left: 50px"
          v-model="data.date1"
          type="datetime"
          placeholder="请选择日期时间"
          format="YYYY/MM/DD HH:mm:ss"
          value-format="YYYY/MM/DD HH:mm:ss"
      />{{data.date1}}

      <!--   data.daterange是数组,肯定有两个值    -->
      <el-date-picker
          style="margin-left: 50px"
          v-model="data.daterange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY/MM/DD"
          value-format="YYYY/MM/DD"
      />{{data.daterange?.length?data.daterange[0]:''}} {{data.daterange?.length?data.daterange[1]:''}}
    </div>

    <!--  数据表格   header-align="center"居中   stripe斑马纹  -->
    <div style="margin: 20px 0;">
      <el-table :data="data.tableData" style="width: 100%" stripe>
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="address" label="地址"/>
        <el-table-column prop="content" label="内容">

          <template #default = "scope">
            <div v-html="scope.row.content"></div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="danger"  @click="del(scope.row.id)" size="small"><el-icon><Delete/></el-icon></el-button>
            <el-button type="primary" @click="edit" size="small">新增</el-button>
            <el-button type="primary" @click="editContent" size="small">编辑富文本</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--  分页  currentPage表示当前所在的页面   pageSize每页显示几条-->
    <div style="margin: 20px 0;">
      <el-pagination
          v-model:current-page="data.currentPage"
          v-model:page-size="data.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="10"
      />
    </div>

    <!--   弹窗  -->
    <el-dialog  v-model="data.dialogVisible" title="编辑内容" width="800">
      <div style="padding: 20px">
        <div style="margin-bottom: 10px">日期：{{data.row.date}}</div>
        <div style="margin-bottom: 10px">名称：{{data.row.name}}</div>
        <div >地址：{{data.row.address}}</div>
      </div>
    </el-dialog>

    <!--   弹窗  -->
    <el-dialog  v-model="data.formContentVisible" title="编辑内容" width="800">
      <div style="padding: 20px">
        <div style="border: 1px solid #ccc; width: 100%">
          <Toolbar
              style="border-bottom: 1px solid #ccc;"
              :editor="editorRef"
              :mode="mode"
          />
          <Editor
              style="height: 500px; overflow: hidden"
              v-model="data.form.content"
              :mode="mode"
              :defaultConfig="editorConfig"
              @onCreated="handleCreated"
          />
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="data.formContentVisible = false">取消</el-button>
          <el-button type="primary" @click="saveContent">保存</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
import {reactive} from 'vue'
import {Calendar, Delete, Search} from "@element-plus/icons-vue";
import img from '@/assets/logo.svg'
import lun1 from '@/assets/lun1.jpg'
import lun2 from '@/assets/lun2.jpeg'
import lun3 from '@/assets/lun3.jpeg'
import router from "@/router/index.js";
import request from "@/utils/request.js";

import '@wangeditor/editor/dist/css/style.css'  //引入css
import {onBeforeUnmount,ref,shallowRef} from "vue";
import {Editor,Toolbar} from "@wangeditor/editor-for-vue";

const data = reactive({
  input: "不是你在干什么呢",
  elem: "深层响应式：reactive 创建的对象及其所有嵌套属性都会变成响应式的。无需 .value：与 ref 不同，访问和修改 reactive 对象的属性时不需要使用",
  options:['苹果','香蕉','梨子'],
  value:'',
  sex:'男',
  tag:'2',
  imgs:[lun1,lun2,lun3],
  date:'',
  date1:'',
  daterange:null,
  tableData:[
    {id:1, date:'2024-2-4',name:'鸡哥',address:'坤国',content:'<h1>哈哈</h1>'},
    {id:2, date:'2024-2-5',name:'阿虎',address:'美国',content:'<h1 style="color: red">哈哈</h1>'},
    {id:3, date:'2024-2-6',name:'花花',address:'法国',content:'<h1 style="font-size: 12px">哈哈</h1>'},
  ],
  currentPage:1,//表示当前所在的页面是第一页
  pageSize:5,//每页五条
  dialogVisible:false,
  row:null,
  employeeList:[],
  formContentVisible:false,
  form: {}
})

const editContent = (row) =>{
  data.form = JSON.parse(JSON.stringify(row)) //深度拷贝
  data.formContentVisible = true
}

const saveContent = () =>{
  data.formContentVisible = false;
}

//  wangEditor5 初始化开始
// const baseUrl = 'http://localhost:9090' //文件上传接口
const editorRef = shallowRef()  // 编辑器实例，必须用 shallowRef
const mode = 'default'
const editorConfig = {MENU_CONF: {}}
//图片上传配置
// editorConfig.MENU_CONF['uploadImage'] = {
//   server:baseUrl + '/files/wang/upload',    //服务端图片上传接口
//   fieldName:'file'    //服务端图片上传接口参数
// }
//组件销毁时，也及时销毁编辑器，否则可能会造成内存泄漏
onBeforeUnmount(() =>{
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
//记录 editor实例，重要！
const handleCreated = (editor) => {
  editorRef.value = editor
}
/*wangEditor5初始化结束*/


request.get('/employee/selectAll').then(res =>{
  console.log(res) //打印數據
  data.employeeList = res.data  //  res.data就是員工的列表数据 一个数組
  console.log(data.employeeList)   //打印数组里面的数据
})

const del = (id) =>{
  alert("删除成功")
}

const edit  = () =>{
  data.dialogVisible=true
}


</script>